<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入 layui.css -->

    <link th:href="@{/css/layui.css}" rel="stylesheet"/>
    <!-- 引入 layui.js -->
    <!--    <script src="layui.js"/>-->
    <script th:src="@{/layui.js}"></script>



</head>
<body>



<div style="margin-bottom: 5px;">

    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>

<!--<div class="layui-btn-group demoTable">-->
<!--    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>-->
<!--    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>-->
<!--    <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
<!--</div>-->

<table class="layui-table" lay-data="{width: 892, height:330, url:'/demo01/bookList', method:'post', page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
<!--        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>-->

        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'name', width:80}">书名</th>
        <th lay-data="{field:'auth', width:80, sort: true}">作者名</th>



        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="detailId">

    <h1></h1>




</script>




<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>

    var baseUrl = "http://localhost:8086/demo01/"

    layui.use(['jquery','table'], function(){
        var $ = layui.jquery;
        var table = layui.table;
        //监听表格复选框选择
        // table.on('checkbox(demo)', function(obj){
        //     console.log(obj)
        // });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){


                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['480px', '540px'], //宽高
                    content: baseUrl+'detail?id='+data.id
                });

                // layer.msg('ID：'+ data.id + ' 的查看操作');



            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // debugger
                    obj.del();


                    $.ajax({
                        //提交数据的类型 POST GET
                        type:"GET",
                        //提交的网址
                        url:"/demo01/deleteBook?id="+obj.data.id,
                        //提交的数据
                        // data:JSON.stringify(param),
                        //返回数据的格式
                        datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                        headers:{'Content-Type':'application/json;charset=utf8','organId':'1333333333'},
                        //在请求之前调用的函数
                        // beforeSend:function(){$("#msg").html("logining");},
                        //成功返回之后调用的函数
                        success:function(data){
                            layer.msg(JSON.stringify(data.message));
                        }   ,
                        //调用出错执行的函数
                        error: function(){
                            //请求出错处理
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        // var $ = layui.$, active = {
        //     getCheckData: function(){ //获取选中数据
        //         var checkStatus = table.checkStatus('idTest')
        //             ,data = checkStatus.data;
        //         layer.alert(JSON.stringify(data));
        //     }
        //     ,getCheckLength: function(){ //获取选中数目
        //         var checkStatus = table.checkStatus('idTest')
        //             ,data = checkStatus.data;
        //         layer.msg('选中了：'+ data.length + ' 个');
        //     }
        //     ,isAll: function(){ //验证是否全选
        //         var checkStatus = table.checkStatus('idTest');
        //         layer.msg(checkStatus.isAll ? '全选': '未全选')
        //     }
        // };
        //
        // $('.demoTable .layui-btn').on('click', function(){
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });
    });
</script>


</body>
</html>